<template>
  <div class="page detail">
    <custom title="支付成功" is-back />
    <div class="flex justify-center align-center flex-direction top">
      <img src="@/assets/integralPaySucc/success.png" alt="" class="topImg" />
      <div class="topTit">支付成功</div>
    </div>
    <div class="butBox">
      <div class="butBoxL" @click="onGoOrderDetail()">查看订单</div>
      <div class="butBoxL" @click="onGoHome()">返回商家</div>
    </div>
    <div class="list">
      <div class="flex listBox">
        <div class="listBoxL">订单编号：</div>
        <div class="listBoxR">35145646544</div>
      </div>
      <div class="flex listBox">
        <div class="listBoxL">支付金额：</div>
        <div class="listBoxR">¥ 497.90</div>
      </div>
      <div class="flex listBox">
        <div class="listBoxL">收货地址：</div>
        <div class="listBoxR">华中互联网金融产品基地</div>
      </div>
      <div class="flex listBox">
        <div class="listBoxL">联系电话：</div>
        <div class="listBoxR">18607155240</div>
      </div>
    </div>
  </div>
</template>

<script>
import custom from '@/components/custom.vue'
export default {
  name: 'Coupon',
  components: { custom },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    onGoOrderDetail() {
      this.$router.push({ path: '/integralOrderDetail' })
    },
    onGoHome() {
      this.$router.push('/integral-shop')
    }
  }
}
</script>

<style scoped>
.topImg{
  width: 130px;
  height: 130px;
  display: block;
}
.topTit{
  font-size: 36px;
  font-weight: 600;
  color: #000000;
}
.butBox{
  padding: 62px 68px;
  display: flex;
  justify-content: space-between;
}
.butBoxL{
  width: 248px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #F35517;
  border-radius: 6px;
  font-size: 28px;
  color: #F35517;
}
.list{
  padding: 0 50px;
}
.listBox{
  font-size: 28px;
  color: #8B8B8B;
  line-height: 1rem;
  margin-bottom: 40px;
}
.listBoxR{
  color: #000000;
}
</style>
